<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>侧栏广告</title>
    <style>
        p{
            width: 300px;
            margin:10px auto;
        }
        .ad{
            height: 300px;
            width: 200px;
            position: fixed;
            left:0;
            top:50%;
            margin-top:-150px;
            border:1px solid red;
        }
        .ad span{
            position: absolute;
            top:0;
            right:0;
            cursor: pointer;
            font-size: 20px;
        }
        .ad-right{
            right:0;
            left:auto;
        }
        .ad-right span{
            left:0;
            right:auto;
        }
    </style>
    <script src="lib/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('.ad span').click(function(){
                //alert('sfsf');
                $(this).parent().toggle(1000);
            });
        })
    </script>
</head>
<body>
    <p>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
        我是文字，我是来占位置的。<br>
    </p>
    <div class="ad">
        <span>&times;</span>
    </div>
    <div class="ad ad-right">
        <span>&times;</span>
    </div>
</body>
</html>